<template>
  <div class="container">
    <div class="form-content">
      <a-form layout="inline">
        <a-form-item label="岗位信息">
          <a-select
            placeholder="请选择岗位"
            v-model:value="position"
            style="width: 150px"
            allowClear
            :options="positionList"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-select
            placeholder="请选择状态"
            v-model:value="status"
            style="width: 200px"
            allowClear
            :options="statusList"
          >
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" class="search-botton" @click="search">搜索</a-button>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
      <a-statistic title="待办数量" :value="store.total" />
    </div>

    <div class="table-content">
      <a-table
        :data-source="store.todoList"
        :columns="columns"
        :pagination="false"
        :scroll="{ y: 570 }"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.key === 'operation'">
            <a-button type="link" size="small" @click="handleInfo(record)">详情</a-button>
            <a-popconfirm
              title="确认发起面试流程?"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handlePass(record)"
            >
              <a-button type="link" size="small">发起面试流程</a-button>
            </a-popconfirm>
            <a-popconfirm
              title="确认忽略投递?"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleWithdraw(record)"
            >
              <a-button type="link" size="small">忽略投递</a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>
    <div class="page-content">
      <a-pagination
        v-if="store.total > 0"
        v-model:page-size="store.pageSize"
        :page-size-options="['10', '20', '50']"
        :total="store.total"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        @change="onPageChange"
      >
      </a-pagination>
    </div>
  </div>
  <todoDrawer></todoDrawer>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useTodoInfo } from '@/stores/todoSrore'
import { useUserStore } from '@/stores/userStore'
import todoDrawer from './components/todoDrawer.vue'
import { message } from 'ant-design-vue'
import server from '@/api'
import dayjs from 'dayjs'

const store = useTodoInfo()
const userStore = useUserStore()

const position = ref('')
const status = ref('')
const statusList = [
  {
    value: 1,
    label: '已发送',
  },
  {
    value: 2,
    label: '已回复',
  },
  {
    value: 3,
    label: '已拒绝',
  },
]
const positionList = ref([])
const search = async () => {
  try {
    const res = await server.getListMyHrApplicationVOByPage({
      current: store.page,
      pageSize: store.pageSize,
      userId: userStore.userAccount,
      positionName: position.value,
      status: status.value,
    })
    if (res.data.code === 0) {
      store.todoList = res.data.data.records
      store.total = res.data.data.total
      store.todoList.forEach(item => {
        item.createTime = dayjs(res.data.data.records.createTime).format('YYYY/MM/DD')
        switch (item.status) {
          case 1:
            item.status = '已发送'
            break
          case 2:
            item.status = '已回复'
            break
          case 3:
            item.status = '已拒绝'
            break
        }
      })
      message.success(res.data.message)
    } else {
      message.error(res.data.message)
    }
  } catch (e) {}
}
const reset = () => {
  position.value = ''
  status.value = ''
  store.page = 1
  store.pageSize = 20
  getMyTodoList()
}
const handleInfo = record => {
  store.openDrawer = true
  store.editData = record
}
const handlePass = async item => {
  try {
    const res = await server.addInvitation({
      hrId: userStore.userAccount,
      hrName: userStore.userTureName,
      positionName: item.positionName,
      positionId: item.positionId,
      userId: item.userId,
      userName: item.userName,
      companyId: item.companyId,
      companyName: item.companyName,
    })
    if (res?.data.code === 0) {
      const res = await server.updateApplicationStatus({
        id: item.id,
        status: 2,
      })
      if (res?.data.code === 0) {
        getMyTodoList()
      }
    } else {
      message.warning(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}
const handleWithdraw = async item => {
  try {
    const res = await server.updateApplicationStatus({
      id: item.id,
      status: 3,
    })
    if (res?.data.code === 0) {
      getMyTodoList()
    } else {
      message.warning(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}

const getMyTodoList = async () => {
  try {
    const res = await server.getListMyHrApplicationVOByPage({
      current: store.page,
      pageSize: store.pageSize,
      userId: userStore.userAccount,
    })
    if (res.data.code === 0) {
      store.todoList = res.data.data.records
      store.total = res.data.data.total
      store.todoList.forEach(item => {
        item.createTime = dayjs(item.createTime).format('YYYY/MM/DD')
        switch (item.status) {
          case 1:
            item.status = '待处理'
            break
          case 2:
            item.status = '已回复'
            break
          case 3:
            item.status = '已拒绝'
            break
        }
      })
      message.success(res.data.message)
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}
onMounted(() => {
  getMyTodoList()
})

const columns = [
  {
    title: '投递人',
    dataIndex: 'userName',
    key: 'userName',
    width: 100,
  },
  {
    title: '职位',
    dataIndex: 'positionName',
    key: 'positionName',
    width: 150,
  },
  {
    title: '公司',
    dataIndex: 'companyName',
    key: 'companyName',
    width: 150,
  },
  {
    title: '工作地',
    dataIndex: 'location',
    key: 'location',
    width: 150,
  },
  {
    title: '应届/往届',
    dataIndex: 'gen',
    key: 'gen',
    width: 150,
  },
  {
    title: '学历',
    dataIndex: 'bg',
    key: 'bg',
    width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  },
]
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 0 15px;
    // padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    padding-right: 15px;
  }
}
</style>
